<template>
  <div class="box_a">
    <div class="v_item" style="padding-left: 13px">
      <div class="val">{{ info.aValue }}<span class="unit">万</span></div>
      <div class="text">新下单</div>
    </div>
    <div class="v_item" style="padding-right: 6px">
      <div class="val">{{ info.bValue }}<span class="unit">万</span></div>
      <div class="text">需交货</div>
    </div>
    <div class="v_item" style="padding-right: 6px">
      <div class="val">{{ info.cValue }}<span class="unit">万</span></div>
      <div class="text">已交货</div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'BoxLeftA',
  data() {
    return {
      info: {
        aValue: 154.5,
        bValue: 436.4,
        cValue: 0
      }
    }
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      this.intervalIns && clearInterval(this.intervalIns)
      this.getRealTimeData()
      this.intervalIns = setInterval(this.getRealTimeData.bind(this), 1000 * 60 * 5) // 每5min刷新
    },
    getRealTimeData() {
      const hour = dayjs().hour()
      if (8 <= hour && hour < 10) {
        this.$set(this.info, 'cValue', 53.7)
      }
      if (10 <= hour && hour < 13) {
        this.$set(this.info, 'cValue', 95.2)
      }
      if (13 <= hour && hour < 15) {
        this.$set(this.info, 'cValue', 195.2)
      }
      if (15 <= hour && hour < 17) {
        this.$set(this.info, 'cValue', 318.6)
      }
    }
  },
  destroyed() {
    clearInterval(this.intervalIns)
  }
}
</script>
<style scoped>
.box_a {
  height: 115px;
  width: 100%;
  padding: 4px 10px;
  display: flex;
  justify-content: space-around;
}
.box_a .v_item {
  flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  padding-left: 2px;
}
.val {
  font-size: 30px;
  font-weight: 700;
  height: 100px;
  padding-top: 10px;
}
.text {
  font-size: 16px;
  font-weight: 600;
}
.unit {
  font-size: 22px;
  padding-left: 2px;
}
</style>
